<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import AdminView from './AdminView.vue'
import MaintainerView from './MaintainerView.vue'
import UserView from './UserView.vue'

const router = useRouter()
const userStore = useUserStore()

// 根据用户角色显示不同的欢迎页面
const userRole = computed(() => userStore.userInfo.role)

// 根据用户角色重定向到相应页面
onMounted(() => {
  if (userRole.value === 'admin') {
    router.push('/admin')
  } else if (userRole.value === 'maintainer') {
    router.push('/maintenance')
  } else if (userRole.value === 'user') {
    router.push('/user')
  }
})
</script>

<template>
  <div class="home-container">
    <!-- 根据用户角色显示不同的欢迎页面 -->
    <AdminView v-if="userRole === 'admin'" />
    <MaintainerView v-else-if="userRole === 'maintainer'" />
    <UserView v-else-if="userRole === 'user'" />
    <div v-else class="welcome-fallback">
      <el-result
        icon="warning"
        title="无法确定您的角色"
        sub-title="请联系系统管理员获取帮助"
      >
        <template #extra>
          <el-button type="primary" @click="router.push('/welcome')">返回首页</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  height: 100%;
  width: 100%;
}

.welcome-fallback {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
